<template>
  <div class="container">
    <h3 style="width: 100%; text-align: center">财务报表更名</h3>

    <a-space direction="vertical" style="width: 100%; margin-top: 15px">
      <!-- 文件选择区域 -->
      <a-space>
        <a-button type="primary" @click="handleSelectFiles">选择Excel文件</a-button>
        <a-button danger @click="handleClearAll">清空列表</a-button>
      </a-space>

      <!-- 文件列表 -->
      <a-list class="scroll-wrapper" bordered :data-source="fileList">
        <template #renderItem="{ item, index }">
          <a-list-item>
            <div class="file-item">
              <span>{{ item }}</span>
              <a-button type="link" danger @click="handleRemove(index)">删除</a-button>
            </div>
          </a-list-item>
        </template>
      </a-list>

      <!-- 保存路径区域 -->
      <div class="save-path">
        <a-space>
          <a-button @click="handleSelectPath">选择保存路径</a-button>
          <span v-if="savePath" style="color: #1890ff">当前路径：{{ savePath }}</span>
        </a-space>
      </div>

      <!-- 确认按钮 -->
      <a-button
          type="primary"
          size="large"
          style="margin-top: 20px"
          @click="handleConfirm"
      >
        确认保存
      </a-button>
    </a-space>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {message} from 'ant-design-vue'
import { SelectFiles, SelectSavePath, SaveToFile } from '../../../wailsjs/go/main/App' // 根据实际路径调整

const fileList = ref([])
const savePath = ref('')

const handleSelectFiles = async () => {
  const files = await SelectFiles()
  if (files.length > 0) {
    // 去重处理
    const newFiles = files.filter(f => !fileList.value.includes(f))
    fileList.value = [...fileList.value, ...newFiles]
  }
}

const handleRemove = (index) => {
  fileList.value.splice(index, 1)
}

const handleClearAll = () => {
  fileList.value = []
}

const handleSelectPath = async () => {
  const path = await SelectSavePath()
  if (path) {
    savePath.value = path
  }
}

const handleConfirm = async () => {
  if (fileList.value.length === 0) {
    message.error('请至少选择一个文件')
    return
  }
  if (!savePath.value) {
    message.error('请选择保存路径')
    return
  }

  const result = await SaveToFile(fileList.value, savePath.value)
  if (result === '保存成功') {
    message.success(result)
    // 清空状态
    fileList.value = []
    savePath.value = ''
  } else {
    message.error(result)
  }
}
</script>

<style>

/* 容器高度设置 */
.container {
  height: 100vh; /* 全屏高度 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.save-path {
  margin-top: 20px;
}

/* 滚动区域样式 */
.scroll-wrapper {
  flex: 1;
  overflow-y: auto; /* 垂直滚动 */
  padding-right: 8px; /* 防止滚动条遮挡内容 */
  height: 50vh;
  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
}
</style>